<template>
	<basic-container>
		<!-- <el-form
			:inline="true"
		>
			<el-form-item>
				<el-input
					v-model="companyName"
					placeholder="搜索企业微信名称"
				></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="fetchBlackList"
					>搜索</el-button
				>
				<el-button plain @click="clearSearchForm">清空</el-button>
			</el-form-item>
        </el-form>-->
		<!-- 黑名单列表数据 -->
		<el-table
			:data="companyData"
			:header-cell-style="{
				background: 'rgb(255, 191, 191)',
				color: 'rgb(44,44,44)',
			}"
			stripe
			v-loading="blackTableLoading"
		>
			<el-table-column prop="corpName" label="企业名称" align="center"></el-table-column>
			<el-table-column prop="wxCorpId" label="企业ID" align="center"></el-table-column>
			<el-table-column prop="createTime" label="申请时间" align="center"></el-table-column>
			<el-table-column prop="chatStatus" label="状态" align="center">
				<template slot-scope="scope">
					<span>{{ scope.row.chatStatus | getStatus }}</span>
				</template>
			</el-table-column>
			<el-table-column label="操作" align="center">
				<template slot-scope="scope">
					<el-button type="text" @click="checkInfo()">查看</el-button>
					<el-button v-if="scope.row.chatApplyStatus == 4 && scope.row.chatStatus == 0" type="text" @click="onOpen()">开通</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!-- 列表分页 -->
		<!-- <el-pagination
			background
			v-if="pagination.total > 0"
			class="madp-black-pagination"
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
			:current-page="pagination.current"
			 :page-sizes="[10, 20, 30, 50,100]"
			:page-size="pagination.size"
			layout="total, sizes, prev, pager, next, jumper"
			:total="pagination.total"
		>
        </el-pagination>-->
		<!-- 查看/编辑企业微信号 -->
		<el-dialog title="查看企业信息" :visible.sync="dialog" :close-on-click-modal="false" :before-close="onClose">
			<div class="madp-form">
				<el-form :model="showInfo">
					<el-form-item v-if="showInfo.name" label=" 企业名称" label-width="160px" prop="name">
						<el-input disabled v-model.trim="showInfo.name" autocomplete="off" maxlength="50"></el-input>
					</el-form-item>
					<el-form-item v-if="showInfo.id" label="企业ID" label-width="160px" prop="id">
						<el-input disabled maxlength="18" v-model="showInfo.id" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item v-if="showInfo.socialCode" label="企业代码" label-width="160px" prop="socialCode">
						<el-input disabled v-model="showInfo.socialCode" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item v-if="showInfo.chatAdmin" label="企业负责人" label-width="160px" prop="chatAdmin">
						<el-input disabled v-model="showInfo.chatAdmin" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item v-if="showInfo.chatAdminPhone" label="企业负责人电话" label-width="160px" prop="chatAdminPhone">
						<el-input disabled v-model="showInfo.chatAdminPhone" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item v-if="showInfo.chatAdminIdcard" label="企业负责人身份证" label-width="160px" prop="chatAdminIdcard">
						<el-input disabled v-model="showInfo.chatAdminIdcard" autocomplete="off"></el-input>
					</el-form-item>
				</el-form>
			</div>
			<div slot="footer">
				<el-button @click="onClose">关闭</el-button>
			</div>
		</el-dialog>
	</basic-container>
</template>
<script>
import {
	companyPage, // 会话内容存档列表
	msgConfig, // 企业信息查看
	chatStatus, //设置会话存档开通状态
} from '@/api/enterprise/message-archiving.js';
export default {
	name: 'messageList',
	data() {
		return {
			showInfo: {},
			dialog: false,
			companyData: [],
			blackTableLoading: true,
			companyName: '',
			pagination: {
				current: 1,
				size: 10,
				total: 0,
			},
		};
	},
	filters: {
		getStatus(status) {
			let type = {
				0: '未开通',
				1: '已开通',
			};
			return type[status];
		},
	},
	mounted() {
		this.getCompanyPage();
		msgConfig().then((res) => {
			if (res.data && res.data.code === 0) {
				this.showInfo = res.data.data;
			}
			console.log('msgConfig', res);
		});
	},
	methods: {
		checkInfo() {
			this.dialog = true;
		},
		onOpen() {
			this.$confirm('是否确认开通消息存档？', '提示', {
				confirmButtonText: '确认',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(() => {
					chatStatus().then((res) => {
						if (res.data && res.data.code === 0) {
							this.getCompanyPage();
						}
					});
				})
				.catch(() => {});
		},
		onClose() {
			this.dialog = false;
		},
		getCompanyPage() {
			this.blackTableLoading = true;
			let data = {
				...this.pagination,
			};
			companyPage(data)
				.then((res) => {
					this.blackTableLoading = false;
					if (res.data && res.data.code === 0) {
						this.companyData = res.data.data.records;

						this.pagination.total = res.data.data.total;
						console.log('companyPage', res);
					}
				})
				.catch(() => {
					this.blackTableLoading = false;
				});
		},
		// 分页
		// handleSizeChange(val) {
		// 	this.pagination.size = val
		// 	this.pagination.current = 1
		// 	// this.fetchBlackList()
		// },
		// handleCurrentChange(val) {
		// 	this.pagination.current = val
		// 	// this.fetchBlackList()
		// },
	},
};
</script>
<style lang="scss" scoped>
.madp-black-pagination {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	margin-top: 10px;
}
</style>
